<template>
    <div>
        <h1>姓名：{{ teacher.name }}</h1>
        <h1>年龄：{{ teacher.age }}</h1>
        <h1>性别：{{ teacher.sex }}</h1>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeSex">修改性别</button>
    </div>
</template>

<script setup lang="ts" name="Teacher">
    import { ref,reactive,toRef,toRefs } from 'vue'
    // let teacher = ref({
    //     name: '张三',
    //     age: 30,
    //     sex: '男'
    // })
    let teacher = reactive({
        name: '张三',
        age: 30,
        sex: '男'
    })
    //将reactive对象teacher中的name属性转换为ref类型对象
    let name =toRef(teacher,'name');
    //批量转换为ref类型对象
    let {age,sex}=toRefs(teacher);
    
    function changeName() {
        //teacher.value.name='李四'
        // console.log(name);
        // console.log(name.value);
        name.value='李四'
    }
    function changeAge() {
        //teacher.value.age=60
        age.value=60
    }
    function changeSex() {
        //teacher.value.sex='女'
        sex.value='女'
    }


</script>

<style scoped>
button {
    margin-right: 20px;
}
</style>
